<script setup lang="ts">
  import defineFunction from './{{kebab_case}}-hooks';
  import {{ pascal_case }}Query from './{{kebab_case}}-query.vue';
  import { defineEmits, ref, Ref } from 'vue';
  import { {{ pascal_case }}VO } from './{{kebab_case}}';
  import MyOptional from '@/components/my/MyOptional.vue';
  import { del } from './{{kebab_case}}.api';
  import { Modal, TableColumnData } from '@arco-design/web-vue';
  import MyStatus from '@/components/my/MyStatus.vue';
  import MyTableColumn from '@/components/my/MyTableColumn.vue';

  const {
    selectedKeys,
    rowSelection,
    defColumns,
    onPageChange,
    pagination,
    tableData,
    getTableData,
    sorterChange,
    onPageSizeChange,
    serialNumberFormatter,
    onSearch,
  } = defineFunction();
  const emits = defineEmits(['switch']);
  const onAdd = () => {
    emits('switch', 'form', {});
  };
  const columns: Ref<TableColumnData[]> = ref([]);
  const onOptional = async (val: string, record: {{ pascal_case }}VO) => {
    if (val === '编辑') {
      emits('switch', 'form', record);
    } else if (val === '删除') {
      Modal.confirm({
        title: '确定要删除这些用户吗？',
        content: '删除后不可恢复',
        onOk: async () => {
          await del([record.id]);
          await getTableData({});
        },
      });
    }
  };
</script>

<template>
  <div class="box">
    <{{ pascal_case }}Query
      v-model:selected-keys="selectedKeys"
      v-model:rowSelection="rowSelection"
      @add="onAdd"
      @search="onSearch"
    >
      <MyTableColumn v-model="columns" :def-columns="defColumns" />
    </{{ pascal_case }}Query>
    <a-table
      v-model:selectedKeys="selectedKeys"
      column-resizable
      row-key="id"
      :row-selection="rowSelection"
      :scroll="{ x: 'true' }"
      :scrollbar="true"
      :bordered="{ cell: true, wrapper: true }"
      :data="tableData"
      :columns="columns"
      size="small"
      :pagination="pagination"
      @page-change="onPageChange"
      @sorter-change="sorterChange"
      @page-size-change="onPageSizeChange"
    >
      <!--   序号   -->
      <template #serialNumber="{ rowIndex }">
       {% raw %}{{ serialNumberFormatter(rowIndex) }}{% endraw %}
      </template>
  {% for column in columns %}
    {%if column.java类型 == 'Boolean'%}
      <template #{{ to_camel_case(column.列名) }}="{ record }">
        <MyStatus :boolean-value="record.{{ to_camel_case(column.列名) }}" />
      </template>
    {% endif %}
  {% endfor %}
      <template #optional="{ record }">
        <MyOptional
          :record="record"
          :list="['删除', '编辑', '配置角色']"
          @select="onOptional"
        />
      </template>
    </a-table>
  </div>
</template>

<style scoped lang="less">
  .box {
    height: calc(100vh - 270px);
  }
</style>
